<template>
    <div class="page animate__animated animate__fadeIn">
        <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '20px 20px 0' }">
            <el-form size="small" inline label-position="right">
                <el-form-item label="月份">
                    <el-date-picker v-model="searchForm.dateMonth" type="month" value-format="yyyy-MM"
                        placeholder="请选择月份" clearable>
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结算状态" prop="settle_status">
                    <el-select v-model="searchForm.settle_status" placeholder="请选择" clearable @clear="reload">
                        <el-option key="0" label="未结算" value="0"></el-option>
                        <el-option key="1" label="已结算" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="reload">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '20px 20px' }">
            <!-- <el-button-group>
                <el-button size="small" plain  @click="settleFunc(ids,2)">批量结算</el-button>
                <el-button size="small" plain icon="el-icon-download" @click="exportData">导出</el-button>
            </el-button-group> -->
            <el-table v-loading="isLoading" size="small" header-cell-class-name="table_header_cell" :data="list"
                @selection-change="handleSelectRow" :row-key="getRowKey">
                <el-table-column type="selection" width="55" :reserve-selection="true">
                </el-table-column>
                <!-- <el-table-column prop="id" label="ID">
                </el-table-column> -->
                <el-table-column prop="xuhao" label="序号" width="80">
                </el-table-column>
                <el-table-column prop="month" label="月份">
                </el-table-column>
                <el-table-column prop="income_money" label="订单金额">
                    <template slot-scope="scope">
                        <span style="color:#67C23A">￥{{ scope.row.order_money ? scope.row.order_money : '0.00' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="income_money" label="手续费">
                    <template slot-scope="scope">
                        <span style="color:#409EFF">￥{{ scope.row.service_money }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="income_money" label="入账金额">
                    <template slot-scope="scope">
                        <span style="color:#F56C6C">￥{{ scope.row.income_money }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="结算状态">
                    <template slot-scope="scope">
                        <span>{{ scope.row.settle_status == 1 ? '已结算' : '未结算' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="开票状态">
                    <template slot-scope="scope">
                        <span class="invoice" @click="handleCommand(scope.row.id, 'invoice')">{{ scope.row.invoice ?
                            '已开票':'未开票' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="160px">
                    <template slot-scope="scope">
                        <div class="handle-con">
                            <span @click="toBillRecord(scope.row.id)">账单记录</span>
                            <el-divider direction="vertical"></el-divider>
                            <el-dropdown size="small" trigger="click" @command="handleCommand(scope.row.id, $event)">
                                <span class="el-dropdown-link">
                                    更多<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="invoice">{{ !scope.row.invoice ?
                                        '开票':'查看发票'}}</el-dropdown-item>
                                    <el-dropdown-item command="download">导出</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </template>
                </el-table-column>
                <div slot="empty" class="empty">
                    <el-empty description="暂无数据" />
                </div>
            </el-table>
            <pagination v-if="total" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.limits"
                @pagination="getList" />
        </el-card>
        <supply-invoice ref="invoice" @success="getList"></supply-invoice>
        <supply-bill-record ref="billRecord"></supply-bill-record>
    </div>
</template>
<script>
import { billList } from "@/api/finance.js";
import hostUrl from "@/utils/baseUrl.js";
import SupplyBillRecord from './components/supplyBillRecord.vue';
import SupplyInvoice from './components/supplyInvoice.vue';
export default {
    components: { SupplyBillRecord, SupplyInvoice },
    data() {
        return {
            searchForm: {
                dateMonth: '',
                page: 1,
                limits: 15,
                settle_status: ''
            },
            isLoading: false,
            total: 0,
            list: [],
            selectedRows: [],
            ids: [],
        }
    },
    created() {
        this.isLoading = true;
        this.getList();
    },
    methods: {
        reload() {
            this.isLoading = true;
            this.searchForm.page = 1;
            this.list = [];
            this.getList();
        },
        getList() {
            billList(this.searchForm).then(res => {
                console.log('res', res)
                this.isLoading = false;
                if (res.code == 0) {
                    this.list = res.data.data;
                    this.total = res.data.total;
                }
            })
        },
        toBillRecord(id) {
            this.$refs.billRecord.add();
            this.$refs.billRecord.searchForm.bill_id = id;
            this.$refs.billRecord.reload();
        },
        handleCommand(id, e) {
            console.log('e', e);
            switch (e) {
                case "settle":
                    this.settleFunc(id, 1);
                    break;
                case "invoice":
                    this.$refs.invoice.add();
                    this.$refs.invoice.billId = id;
                    this.$refs.invoice.getDetail()
                    break;
                case "download":
                    window.location.href = `${hostUrl}/exportSupplyBillRecord?bill_id=${id}`
                    break;
            }
        },
        exportData() {
            window.location.href = `${hostUrl}/exportSupplyBillList?settle_status=${this.searchForm.settle_status}&dateMonth=${this.searchForm.dateMonth}`
        },
        settleFunc(id, type) {
            if (type == 2) {
                if (id.length == 0) {
                    this.$message.error('还未选择账单');
                    return;
                }
            }
            const bill_ids = type == 1 ? id : id.join(",");
            console.log('bill_ids', bill_ids)
            this.$msgbox({
                title: '提示',
                message: "确认完成结算？",
                showCancelButton: true,
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonDisabled = true;
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '确认中...';
                        settleSupplyBills({
                            bill_ids,
                        }).then(res => {
                            if (res.code == 0) {
                                instance.confirmButtonDisabled = false;
                                instance.confirmButtonLoading = false;
                                instance.confirmButtonText = '确认';
                                this.$message.success(res.msg);
                                this.getList()
                            } else {
                                instance.confirmButtonDisabled = false;
                                instance.confirmButtonLoading = false;
                                instance.confirmButtonText = '确认';
                            }
                            done();
                        })
                    } else {
                        done();
                    }
                }
            })

        },
        getRowKey(row) {
            return row.id;
        },
        handleSelectRow(val) {
            this.selectedRows = val;
            this.ids = this.selectedRows.map(v => {
                return v.id
            })
            console.log('selectedRows', this.selectedRows)
            console.log('ids', this.ids)
        },
    }
}
</script>
<style scoped>
/deep/ .el-divider {
    background-color: var(--main-color);
    opacity: 0.5;
    position: relative;
    top: 2px;
}

/deep/ .el-dropdown {
    font-size: 12px;
    color: var(--main-color);
}

.tag {
    cursor: pointer;
}

.handle-con {
    color: var(--main-color);
    display: flex;
    align-items: baseline;
    cursor: pointer;
}

.handle-con span {
    cursor: pointer;
}

.invoice {
    cursor: pointer;
}
</style>